<template>
  <div>
    <div class="row full-width justify-between items-center">
      <div
        :class="isPad ? containerStyle : ''"
        style="display: flex; align-items: center"
      >
        <div
          style="width: 5px; height: 25px; margin-right: 20px"
          :class="tipclass"
          :style="tipStyle"
        ></div>

        <span v-if="!isTitleEdit">{{ title }}</span>

        <q-input
          filled
          dense
          class="q-pa-none"
          v-if="isTitleEdit"
          autofocus
          clearable
          :dark="dark"
          v-model="titleEdit"
          @blur="handleChange"
        ></q-input>
      </div>
      <div class="row items-center">
        <span v-if="isCaption" class="text-caption" :class="capClass">{{
          capTitle
        }}</span>
        <q-btn
          v-if="isAdd"
          style="height: 25px"
          size="10px"
          class="q-mx-sm"
          :color="btnColor"
          outline
          @click.stop="handleAdd"
          icon="add"
        >
        </q-btn>
        <q-btn
        v-if="isEdit"
        style="height: 25px"
        size="10px"
        class="q-mx-sm"
        :color="editBtnColor"
        outline
        @click.stop="handleEdit"
        icon="edit"
      >
      </q-btn>
      </div>

    </div>

    <q-separator
      v-if="isSeparator"
      :class="isPad ? 'q-ml-lg' : ''"
      class="q-mt-sm"
      :color="lineColor"
    />
  </div>
</template>

<script>
export default {
  name: "TipsTitle",
  props: {
    btnColor:{
      default:'white'
    },
    editBtnColor:{
      default:'white'
    },
    tipclass: {
      type: String,
      default: "bg-teal-6",
    },
    title: {
      type: String,
      default: "标题",
    },
    isSeparator: {
      type: Boolean,
      default: true,
    },
    isPad: {
      typr: Boolean,
      default: true,
    },
    tipStyle: {
      default: "",
    },
    lineColor: {
      default: "grey-9",
    },
    isAdd: {
      default: false,
    },
    isEdit: {
      default: false,
    },
    isTitleEdit: {
      default: false,
    },
    isCaption: {
      default: false,
    },
    dark: {
      default: true,
    },
    capClass: {
      default: "text-grey-6",
    },
    capTitle: {
      default: "提示",
    },
  },
  watch: {
    isTitleEdit: function (val) {
      if (val) {
        this.titleEdit = this.title;
      }
    },
  },
  data() {
    return {
      containerStyle: this.$q.platform.is.mobile ? "q-pl-sm" : "q-pl-md ",
      titleEdit: "",
    };
  },
  methods: {
    handleAdd() {
      this.$emit("add");
    },
    handleEdit() {
      this.$emit("edit");
    },
    handleChange() {
      if (!this.titleEdit) {
        var name = "未命名文档";
      } else {
        var name = this.titleEdit;
      }
      this.$emit("update:isTitleEdit", false);
      this.$emit("update:title", name);
    },
  },
};
</script>

<style scoped>
</style>
